<template>
  <a-card class="feedback-list--backend" ref="feedbackList" :bordered="false">
    <div class="header">
      <a-button
        v-if="$auth('SYSTEM_NOTICE.NOTICE_ADD')"
        type="primary"
        class="float-right"
        @click="handleAdd"
      >
        {{ $t('all.autotext409') }}
      </a-button>
    </div>

    <s-table
      ref="table"
      size="default"
      table-layout="fixed"
      :row-key="record => record.id"
      :columns="columns"
      :data="loadData"
    >
      <template slot="id" slot-scope="text, record, index">
        {{ index | getPageIndex($refs.table) }}
      </template>
      <div slot="status" slot-scope="text" class="table__column--content">
        {{ notifyStatus[text] || '-' }}
      </div>
      <div slot="action" slot-scope="text, row">
        <a
          v-if="$auth('SYSTEM_NOTICE.NOTICE_DETAIL') && row.status!==1"
          @click="handleView(row)"
        >{{ $t('all.autotext568') }}</a>
        <a v-else-if="$auth('SYSTEM_NOTICE.NOTICE_EDIT')" @click="handleEdit(row)">{{ $t('all.autotext919') }}</a>
      </div>
    </s-table>
    <a-modal
      :title="isEdit ? $t('all.autotext1325.1') : $t('all.autotext1325.2')"
      :visible="editVisible"
      width="600px"
      :footer="null"
      @cancel="handleCancel"
    >
      <a-form-model
        ref="ruleForm"
        :model="form"
        :rules="rules"
        layout="horizontal"
        :label-col="{ span:5,style: { width: '70px' } }"
        :wrapper-col="{ span: 15 }"
      >
        <a-row :gutter="20">
          <a-col :span="16">
            <a-form-model-item :label="$t('all.autotext496')" prop="type">
              <a-select v-model="form.type" >
                <a-select-option value="1">{{ $t('all.autotext841') }}</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-form-model-item :label="$t('all.autotext818')" prop="title">
          <a-input v-model="form.title" :maxLength="60" :placeholder="$t('all.autotext724')"/>
        </a-form-model-item>
        <a-form-model-item :label="$t('all.autotext1289')" prop="content">
          <a-textarea
            v-model="form.content"
            :maxLength="800"
            :placeholder="$t('all.autotext958')"
            :rows="4"
          />
        </a-form-model-item>
        <a-row>
          <a-col :span="24">
            <a-form-model-item :label="$t('all.autotext269')" prop="show">
              <a-switch v-model="form.show" />
              <span style="color:#999999;margin-left: 20px">{{ $t('all.autotext1529') }}</span>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
      <div class="btn-wrap" >
        <a-space>
          <a-button @click="()=>handleOk(1)" :loading="saveLoading">{{ $t('all.autotext457') }}</a-button>
          <a-button type="primary" :loading="confirmLoading" @click="()=>handleOk(2)">{{ $t('all.autotext195') }}</a-button>
        </a-space>
      </div>
    </a-modal>
    <a-modal
      :title="$t('all.autotext590')"
      :visible="viewVisible"
      @cancel="viewVisible = false"
      :footer="null"
      width="600px"
    >
      <div class="notify-section">
        <div class="label">{{ $t('all.autotext496') }}</div>
        <div class="value">{{ $t('all.autotext841') }}</div>
      </div>
      <div class="notify-section">
        <div class="label">{{ $t('all.autotext818') }}</div>
        <div class="value">{{ detail.title }}</div>
      </div>
      <div class="notify-section">
        <div class="label">{{ $t('all.autotext1289') }}</div>
        <div class="value" style="color:#4D5C6F">{{ detail.content }}</div>
      </div>
      <div class="notify-section" v-if="detail.show" style="color:#999999">
        {{ $t('all.autotext1529') }}
      </div>
      <div class="btn-wrap" style="justify-content: flex-end;">
        <a-button type="primary"  @click="viewVisible=false">{{ $t('all.autotext1294') }}</a-button>
      </div>
    </a-modal>
  </a-card>
</template>

<script>
import { getNotifyList, addNotify, editNotify, getNotifyDetail } from '@/api/system/notify'
import { systemNoticeCol } from '@views/system-notice/config/column'
import { unreactive } from '@/utils/util'
import moment from 'moment'

export default {
  name: 'system-notify',
  data () {
    return {
      columns: unreactive(systemNoticeCol),
      loadExportCheck: false,
      editVisible: false,
      viewVisible: false,
      confirmLoading: false,
      saveLoading: false,
      detail: {},
      form: {
        id: undefined,
        type: '1',
        show: false,
        title: undefined,
        content: undefined
      },
      rules: {
        type: [{ required: true, message: this.$t('all.autotext78'), trigger: 'change' }],
        title: [{ required: true, message: this.$t('all.autotext724'), trigger: 'blur' }],
        content: [{ required: true, message: this.$t('all.autotext958'), trigger: 'blur' }]
      },
      notifyStatus: {
        1: this.$t('all.autotext1'),
        2: this.$t('all.autotext608'),
        3: this.$t('all.autotext303'),
        4: this.$t('all.autotext1319')
      }
    }
  },
  computed: {
    isEdit () {
      return this.form.id !== undefined
    }
  },
  methods: {
    getIndex (index) {
      const { current, pageSize } = this.$refs.table.getPagination()
      return ((current - 1) * pageSize) + index + 1
    },
    loadData (param) {
      return getNotifyList(param).then(res => {
        if (res.content) {
          res.content = res.content.map(e => {
            e.createTime = moment(e.createTime).format('YYYY-MM-DD HH:mm:ss')
            return e
          })
        }
        return res
      })
    },
    handleView (record) {
      getNotifyDetail({
        id: record.id
      })
      this.detail = {
        ...record,
        type: record.type.toString(),
        show: record.show === 1
      }
      this.viewVisible = true
    },
    handleEdit (record) {
      this.form = {
        ...record,
        type: record.type.toString(),
        show: record.show === 1
      }
      this.showEditModal()
    },
    handleAdd () {
      this.showEditModal()
    },
    // 新增
    showEditModal () {
      this.editVisible = true
    },
    // 隐藏modal
    hideEditModal () {
      this.$refs.ruleForm.resetFields()
      this.form = {
        id: undefined,
        type: '1',
        show: false,
        title: undefined,
        content: undefined
      }
      this.editVisible = false
      this.saveLoading = false
      this.confirmLoading = false
    },
    // 发布
    handleOk (status) {
      const that = this
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          if (status === 1) {
            that.saveLoading = true
          } else {
            that.confirmLoading = true
          }
          const { id, content, title, show, type } = this.form
          const request = id ? editNotify : addNotify
          request({
            id,
            content,
            title,
            type,
            show: show ? 1 : 0,
            status
          }).then(res => {
            that.$refs.table.refresh(1)
            this.$message.success(status === 1 ? this.$t('all.autotext1316') : this.$t('all.autotext1448'))
            that.hideEditModal()
          })
        }
      })
    },
    // 关闭弹窗
    handleCancel (e) {
      const { title, content } = this.form
      const noContent = !title && !content
      if (noContent) {
        this.hideEditModal()
        return
      }
      const that = this
      this.$confirm({
        title: this.$t('all.autotext730'),
        content: this.$t('all.autotext996'),
        cancelText: this.$t('all.autotext86'),
        okText: this.$t('all.autotext1008'),
        onOk () {},
        onCancel () {
          that.hideEditModal()
        }
      })
    }
  }
}
</script>

<style scoped lang='less'>
.feedback-list--backend {
  .header {
    display: flow-root;
    margin-bottom: 10px;

    .float-right {
      float: right;
    }
  }
  .table__column--content {
    width: 500px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
}

.btn-wrap {
  margin-top: 30px;
  text-align: center;
  display: flex;
  justify-content: center;
}
/deep/.ant-form-item {
  width: 100%;
}


.notify-section{
  display: flex;
  align-items: center;
  margin-bottom: 24px;
  font-size: 16px;
  .label{
    width:32px;
    color: #0F121B;
    margin-right: 12px;
    flex-shrink: 0;
  }
  .value{
    color: #D6DFEC;
    font-size: 14px;
    padding: 9px 16px;
  }
}

</style>
